import React from "react";
import { View, Text, Image } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import styles from "../style/container.style";

// 定义Logo图片
const LOGO_IMAGE = require("../../../../assets/icon.png");

// 定义容器组件的props类型
interface LoginContainerProps {
  title: string;
  subtitle: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

const LoginContainer: React.FC<LoginContainerProps> = ({
  title,
  subtitle,
  children,
  footer,
}) => {
  const { colors } = useTheme();

  return (
    <View style={styles.container}>
      {/* 头部区域：标题和Logo */}
      <View style={styles.header}>
        <View>
          <Text style={[styles.title, { color: colors.text.primary }]}>
            {title}
          </Text>
          <Text style={[styles.subtitle, { color: colors.text.secondary }]}>
            {subtitle}
          </Text>
        </View>
        <View style={{ marginLeft: "auto" }}>
          <Image source={LOGO_IMAGE} style={styles.logo} resizeMode="contain" />
        </View>
      </View>
      <View style={[styles.content, { marginTop: 20 }]}>{children}</View>
      {/* 底部区域 - 相当于具名slot */}
      {footer && <View style={styles.footer}>{footer}</View>}
    </View>
  );
};

export default LoginContainer;
